﻿<Page x:Class="NewMarkersSample.Pages.LetterFrequencyPage"
	  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	  xmlns:d3="http://research.microsoft.com/DynamicDataDisplay/1.0"
	  xmlns:local="clr-namespace:NewMarkersSample.Pages"
	  Title="LetterFrequencyPage">
	<Grid>
		<Grid.ColumnDefinitions>
			<ColumnDefinition/>
			<ColumnDefinition/>
		</Grid.ColumnDefinitions>
		<Grid.RowDefinitions>
			<RowDefinition/>
			<RowDefinition/>
			<RowDefinition/>
		</Grid.RowDefinitions>

		<TextBox AcceptsReturn="True" Name="inputTb" TextChanged="inputTb_TextChanged" 
				 Grid.Row="0" Grid.Column="0"/>

		<d3:ChartPlotter Name="plotter1" Grid.Column="1" Grid.Row="0">
			<d3:ColumnChart ItemsSource="{Binding}" DependentValuePath="Value" LegendDescription="Letter Frequency as ColumnChart"/>
		</d3:ChartPlotter>

		<d3:ChartPlotter Name="plotter2" Grid.Column="0" Grid.Row="1">
			<d3:PieChart ItemsSource="{Binding}" IndependentValuePath="Value">
				<d3:PieChart.Resources>
					<local:CharToStringConverter x:Key="conv"/>
				</d3:PieChart.Resources>

				<d3:PieChart.DependentValueBinding>
					<Binding Path="Key" Converter="{StaticResource conv}"/>
				</d3:PieChart.DependentValueBinding>
			</d3:PieChart>
		</d3:ChartPlotter>

		<d3:ChartPlotter Name="plotter3" Grid.Column="1" Grid.Row="1">
			<d3:MarkerChart Name="chart3" ItemsSource="{Binding}" DependentValuePath="Value" LegendDescription="Letter's frequency">
				<d3:DiamondMarker MarkerWidth="10" MarkerHeight="10" MarkerFill="Blue"
								  d3:ViewportPanel.X="{Binding Key}"
								  d3:ViewportPanel.Y="{Binding Value}"
								  >
					<d3:LiveToolTipService.ToolTip>
						<DataTemplate>
							<TextBlock>
								<TextBlock Text="{Binding Key}"/>
								<Run> - </Run>
								<TextBlock Text="{Binding Value}"/>
							</TextBlock>
						</DataTemplate>
					</d3:LiveToolTipService.ToolTip>
				</d3:DiamondMarker>
			</d3:MarkerChart>
		</d3:ChartPlotter>
	</Grid>
</Page>
